<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tooltip</title>
  <link rel="stylesheet" href="../dist/aqua.css" />
  <link rel="stylesheet" href="./styles/demo.css" />
  <link rel="stylesheet" href="./styles/tooltip.css" />
</head>

<body>
  <div class="tooltips">
    <div class="top">
      <button class="btn btn-primary" data-tooltip="top-left tooltip" data-placement="top-left">
        Hover
      </button>
      <button class="btn btn-primary" data-tooltip="top tooltip" data-placement="top">
        Hover
      </button>
      <button class="btn btn-primary" data-tooltip="top-right tooltip" data-placement="top-right">
        Hover
      </button>
    </div>
    <div class="right">
      <button class="btn btn-primary" data-tooltip="right-top tooltip" data-placement="right-top">
        Hover
      </button>
      <button class="btn btn-primary" data-tooltip="right tooltip" data-placement="right">
        Hover
      </button>
      <button class="btn btn-primary" data-tooltip="right-bottom tooltip" data-placement="right-bottom">
        Hover
      </button>
    </div>
    <div class="bottom">
      <button class="btn btn-primary" data-tooltip="bottom-left tooltip" data-placement="bottom-left">
        Hover
      </button>
      <button class="btn btn-primary" data-tooltip="bottom tooltip" data-placement="bottom">
        Hover
      </button>
      <button class="btn btn-primary" data-tooltip="bottom-right tooltip" data-placement="bottom-right">
        Hover
      </button>
    </div>
    <div class="left">
      <button class="btn btn-primary" data-tooltip="left-top tooltip" data-placement="left-top">
        Hover
      </button>
      <button class="btn btn-primary" data-tooltip="left tooltip" data-placement="left">
        Hover
      </button>
      <button class="btn btn-primary" data-tooltip="left-bottom tooltip" data-placement="left-bottom">
        Hover
      </button>
    </div>
  </div>
</body>

</html>